﻿@model DMS.Models.BannerModel
@{
    ViewBag.Title = "Thêm mới Banner";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}

<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Cập nhật Banner</h2>

                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                @using (Html.BeginForm("BannerAdd", "Admin", FormMethod.Post, new { id = "form_banneradd", @class = "form-horizontal form-label-left", role = "form" }))
                {
                    @Html.AntiForgeryToken()
                    @Html.ValidationSummary(true)
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">
                            Tên Banner <span class="required">*</span>
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            @Html.TextBoxFor(model => model.BannerName, new { @class = "form-control col-md-7 col-xs-12" })
                            @Html.ValidationMessageFor(model => model.BannerName)
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">
                            Vị trí Banner
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            @Html.DropDownListFor(model => model.BannerPosition, Model.BannerPosition_List, new { @class = "form-control col-md-7 col-xs-12" })
                            @Html.ValidationMessageFor(model => model.BannerPosition)
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">
                            Loại Banner
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            @Html.DropDownListFor(model => model.BannerType, Model.BannerType_List, new { @class = "form-control col-md-7 col-xs-12", @disabled=true })
                            @Html.ValidationMessageFor(model => model.BannerType)

                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">
                            Trạng thái
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="checkbox">
                                <label>
                                    @Html.CheckBoxFor(model => model.BannerActive, new { @class = "flat" })
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">
                            Thời gian hiệu lực
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="form-horizontal">
                                <fieldset>
                                    <div class="control-group">
                                        <div class="controls">
                                            <div class="input-prepend input-group">
                                                <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
                                                @*<input type="text" style="width: 200px" name="reservation" id="reservation" class="form-control" value="@DateTime.Now.ToString("MM/dd/yyyy") - @DateTime.Now.AddMonths(1).ToString("MM/dd/yyyy")" />*@
                                                @Html.TextBoxFor(model => model.StartEndDate, new { @class = "form-control", @readonly = true, @name = "reservation", @id = "reservation", @style = "width:200px" })
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">
                            Tải banner
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div id="dZUpload" class="dropzone" style="width:150px; border:1px solid rgba(0, 0, 0, 0.3); padding:0px">
                                <div class="dz-default dz-message">
                                    Kéo thả banner cần upload vào đây
                                </div>
                            </div>
                        </div>
                    </div>
                    @Html.TextBoxFor(model => model.BannerId, new { @class = "hidden" })
                    @Html.TextBoxFor(model => model.BannerContent, new { @class = "hidden" })
                    <div class="ln_solid"></div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-3">
                            <button id="send" type="submit" class="btn btn-success">@ViewBag.ButtonName</button>
                        </div>
                    </div>

                }
            </div>
        </div>
    </div>
</div>

<div>
    @Html.ActionLink("Danh sách Banner", "banners", "admin")
</div>

@section Scripts {
<script type="text/javascript" src="/assets/admin/js/dropzone/dropzone.js"></script>
<script type="text/javascript" src="/assets/admin/js/moment.min2.js"></script>
<script type="text/javascript" src="/assets/admin/js/datepicker/daterangepicker.js"></script>
    <script>
        $(document).ready(function () {

            var cb = function (start, end, label) {
                console.log(start.toISOString(), end.toISOString(), label);
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
                //alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
            }
            var optionSet1 = {
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                minDate: '01/01/2012',
                maxDate: '12/31/2015',
                dateLimit: {
                    days: 60
                },
                showDropdowns: true,
                showWeekNumbers: true,
                timePicker: false,
                timePickerIncrement: 1,
                timePicker12Hour: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                opens: 'right',
                buttonClasses: ['btn btn-default'],
                applyClass: 'btn-small btn-primary',
                cancelClass: 'btn-small',
                format: 'MM/DD/YYYY',
                separator: ' to ',
                locale: {
                    applyLabel: 'Submit',
                    cancelLabel: 'Clear',
                    fromLabel: 'From',
                    toLabel: 'To',
                    customRangeLabel: 'Custom',
                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    firstDay: 1
                }
            };
            $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
            $('#reportrange').daterangepicker(optionSet1, cb);
            $('#reportrange').on('show.daterangepicker', function () {
                console.log("show event fired");
            });
            $('#reportrange').on('hide.daterangepicker', function () {
                console.log("hide event fired");
            });
            $('#reportrange').on('apply.daterangepicker', function (ev, picker) {
                console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
            });
            $('#reportrange').on('cancel.daterangepicker', function (ev, picker) {
                console.log("cancel event fired");
            });            
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#reservation').daterangepicker(null, function (start, end, label) {
                console.log(start.toISOString(), end.toISOString(), label);

            });
            UploadFile();
        });
        function UploadFile() {
            Dropzone.autoDiscover = false;
            var url = "/uploadfiles.ashx?type=banner";
            $("#dZUpload").dropzone({
                url: url,
                maxFiles: 1,
                addRemoveLinks: true,
                success: function (file, response) {
                    file.previewElement.classList.add("dz-success");
                    console.log("Successfully uploaded :", response, response.Status, response.Url, file);
                    if (response.Status == 1) {
                        $("#BannerContent").val(response.Url);
                    }
                },
                error: function (file, response) {
                    file.previewElement.classList.add("dz-error");
                }
            });
        }
    </script>
}
